<!DOCTYPE html>
<html>

<head>
    <title>Todo List</title>
    <style>
        .container {
            max-width: 600px;
            margin: 20px auto;
            padding: 20px;
            background: #f5f5f5;
            border-radius: 8px;
        }

        .input-section {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
        }

        #taskInput {
            flex: 1;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }

        button {
            padding: 8px 16px;
            background: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        button:hover {
            background: #0056b3;
        }

        .task-item {
            display: flex;
            align-items: center;
            padding: 10px;
            background: white;
            margin: 5px 0;
            border-radius: 4px;
        }

        .completed {
            text-decoration: line-through;
            opacity: 0.6;
        }
    </style>
</head>

<body>
    <div class="container">
        <h1>Todo List</h1>
        <div class="input-section">
            <input type="text" id="taskInput" placeholder="输入新任务...">
            <button onclick="addTask()">添加</button>
        </div>
        <div class="filter-section">
            <button onclick="filterTasks('all')">全部</button>
            <button onclick="filterTasks('active')">未完成</button>
            <button onclick="filterTasks('completed')">已完成</button>
        </div>
        <ul id="taskList"></ul>
    </div>
    <script>
        // 初始化任务数组（从 localStorage 加载）
        let tasks = JSON.parse(localStorage.getItem('tasks')) || [];

        // 渲染任务列表
        function renderTasks(filter = 'all') {
            const taskList = document.getElementById('taskList');
            taskList.innerHTML = '';

            const filteredTasks = tasks.filter(task => {
                if (filter === 'active') return !task.completed;
                if (filter === 'completed') return task.completed;
                return true;
            });

            filteredTasks.forEach((task, index) => {
                const li = document.createElement('li');
                li.className = `task-item ${task.completed ? 'completed' : ''}`;
                li.innerHTML = `
      <input type="checkbox" ${task.completed ? 'checked' : ''} 
             onchange="toggleTask(${index})">
      <span>${task.text}</span>
      <button onclick="deleteTask(${index})">删除</button>
    `;
                taskList.appendChild(li);
            });
        }

        // 添加任务
        function addTask() {
            const input = document.getElementById('taskInput');
            const text = input.value.trim();
            if (text === '') return;

            tasks.push({ text, completed: false });
            localStorage.setItem('tasks', JSON.stringify(tasks));
            input.value = '';
            renderTasks();
        }

        // 切换任务状态
        function toggleTask(index) {
            tasks[index].completed = !tasks[index].completed;
            localStorage.setItem('tasks', JSON.stringify(tasks));
            renderTasks();
        }

        // 删除任务
        function deleteTask(index) {
            tasks.splice(index, 1);
            localStorage.setItem('tasks', JSON.stringify(tasks));
            renderTasks();
        }

        // 筛选任务
        function filterTasks(type) {
            renderTasks(type);
        }

        // 初始化渲染
        renderTasks();
    </script>
</body>

</html>